<template>
  <div class="big_box">
    <div class="topic_con_scroll">
      <div>
        <div class="question_content">
          <div class="question_tit">一、 读一读，完成练习。（17分+5分）</div>
          <div class="question_box">
            <div class="question_box_tit">一鸣惊人</div>
            <div class="question_box_txt">
              楚庄王登位执政已经三年了。然而三年之中，默默无闻，没有颁发一项命令，没有管理一件政事。‖<br />
              有一天，右司马在宫中侍坐，对庄王隐喻道：“大王啊，有一只鸟停息在南方山上，时过三年，（
              ）不展翅飞腾，（ ）不引吭高鸣。请问，这是什么缘故呢？”
              庄王笑笑回答说：“三年不展翅□是为了让羽翼长得丰满□不飞不鸣□是细心观察民情事理□这样的鸟□（
              ）不飞□一飞必定直冲云天□（
              ）不鸣□一鸣就会让人吃惊！您放心吧，您的意思我都知道了。”‖<br />
              半年以后，楚庄王就开始亲自治理国家政事：废止了十项陈章，兴立了九件新政，诛杀了五个不法大臣，起用了六位贤德隐士。从此，楚国大治。‖
            </div>
          </div>
        </div>
        <div
          class="topic_item"
          v-if="allquestion.length > 0"
          v-for="(v, n) in allquestion[summarizeIndex]['stem']"
          :key="n"
        >
          <div v-for="(v1, n1) in v.question" v-if="v1.type == 1">
            <div class="topic_item_t">
              <p>Q{{ n + 1 }}</p>
              <img src="../../assets/image/lesson/answerT.png" alt="" />
              <p style="color: #373737">{{ v1.question }}</p>
            </div>
          </div>
          <div v-for="(v1, n1) in v.question" v-if="v1.type == 2">
            <div class="topic_item_p">
              <div
                v-for="(l, i) in v1.answer"
                class="item_p_sel"
                :class="{ curr_item_p_sel: l.isChose }"
                @click="changeItemel(v1.answer, l)"
              >
                <img
                  v-show="l.isChose"
                  class="target"
                  src="../../assets/image/lesson/target.png"
                  alt=""
                />
                <span>{{ l.letter + "." }}</span>
                {{ l.answer_content }}
              </div>
            </div>
          </div>
        </div>
      </div>

      <div
        v-if="summarizeIndex < allquestion.length - 1"
        class="next_group"
        @click="nextGroup"
      >
        <img src="../../assets/image/lesson/nextGroup.png" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "mysummary",
  data() {
    return {
      letterArray: ["A", "B", "C", "D"],
      topicList: [
        {
          tit: "少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了",
          list: [
            "提高记忆力加工的能力",
            "提高记忆力加工的能力",
            "提高记忆力加工的能力",
          ],
        },
        {
          tit: "少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了",
          list: [
            "提高记忆力加工的能力",
            "提高记忆力加工的能力",
            "提高记忆力加工的能力",
          ],
        },
        {
          tit: "少年用他的智慧打败了巨人。巨人再也不敢来抢他的玩具了",
          list: [
            "提高记忆力加工的能力",
            "提高记忆力加工的能力",
            "提高记忆力加工的能力",
          ],
        },
      ],
      currItemel: -1,
      choseitemFlag: -1,
      allquestion: [],
      summarizeIndex: 0,
    };
  },
  props: ["questionList"],
  mounted() {
    console.log(this.$store.state.summarizeIndex);
    this.summarizeIndex = this.$store.state.summarizeIndex;
    this.$emit("setSummarizeIndex", this.summarizeIndex);
    this.renderpage();
    console.log(this);
    // this.$emit("showloading",{
    // 	methods:'push',
    // 	path:'/score'
    // })

    // this.clearVuex()
  },

  watch: {},
  methods: {
    renderpage() {
      this.$request
        .get("getWordLogiclist", {})
        .then((res) => {
          // console.log(res.data.data)
          for (var i = 0; i < res.data.data.length; i++) {
            for (var k = 0; k < res.data.data[i]["stem"].length; k++) {
              for (
                var j = 0;
                j < res.data.data[i]["stem"][k].question.length;
                j++
              ) {
                for (
                  var o = 0;
                  o < res.data.data[i]["stem"][k].question[j].answer.length;
                  o++
                ) {
                  //多个未答题型 怎么办
                  // console.log(this.$store.state.summarizequestionArray)
                  res.data.data[i]["stem"][k].question[j].answer[
                    o
                  ].isChose = false;
                  if (this.$store.state.summarizequestionArray) {
                    for (
                      var q = 0;
                      q < this.$store.state.summarizequestionArray.length;
                      q++
                    ) {
                      for (
                        var w = 0;
                        w <
                        this.$store.state.summarizequestionArray[q]["stem"]
                          .length;
                        w++
                      ) {
                        for (
                          var e = 0;
                          e <
                          this.$store.state.summarizequestionArray[q]["stem"][w]
                            .question.length;
                          e++
                        ) {
                          for (
                            var r = 0;
                            r <
                            this.$store.state.summarizequestionArray[q]["stem"][
                              w
                            ].question[e].answer.length;
                            r++
                          ) {
                            if (
                              res.data.data[i]["stem"][k].question[j].answer[o]
                                .id ==
                              this.$store.state.summarizequestionArray[q][
                                "stem"
                              ][w].question[e].answer[r].id
                            ) {
                              res.data.data[i]["stem"][k].question[j].answer[
                                o
                              ].isChose = this.$store.state.summarizequestionArray[
                                q
                              ]["stem"][w].question[e].answer[r].isChose;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
          this.allquestion = res.data.data;
          console.log(this.allquestion);
          //用nextgroup来驱动倒计时 应该是0
          this.$emit(
            "countdown",
            this.allquestion[this.summarizeIndex].current_time,
            this.allquestion[this.summarizeIndex].end_time
          );
        })
        .catch((err) => {
          // this.$message({
          //           message: '警告哦，这是一条警告消息',
          //           type: 'warning'
          //         });
        });
    },
    saveQuestion() {
      this.$store.commit("setsummarizequestionArray", this.allquestion);
    },
    nextGroup(flag) {
      if (this.summarizeIndex == this.allquestion.length - 1) {
        //提交
        this.submit();
        return;
      }
      //必须用index来驱动
      // if(!flag){
      this.summarizeIndex++;
      // }
      this.$emit("setSummarizeIndex", this.summarizeIndex);
      this.$store.commit("setSummarize", this.summarizeIndex);
      this.$emit(
        "countdown",
        this.allquestion[this.summarizeIndex].current_time,
        this.allquestion[this.summarizeIndex].end_time
      );
      console.log(this.summarizeIndex);
      console.log(this.$store.state.summarizeIndex);
    },
    submit() {
      console.log("submit");
      var arr = [];
      this.allquestion;
      for (var i = 0; i < this.allquestion.length; i++) {
        for (var k = 0; k < this.allquestion[i]["stem"].length; k++) {
          for (
            var j = 0;
            j < this.allquestion[i]["stem"][k].question.length;
            j++
          ) {
            for (
              var o = 0;
              o < this.allquestion[i]["stem"][k].question[j].answer.length;
              o++
            ) {
              if (
                this.allquestion[i]["stem"][k].question[j].answer[o].isChose
              ) {
                arr.push({
                  test_id: this.allquestion[i].test_id,
                  id: this.allquestion[i]["stem"][k].question[j].id,
                  answer: this.allquestion[i]["stem"][k].question[j].answer[o]
                    .id,
                });
              }
            }
          }
        }
      }
      console.log(arr);
      // return
      this.$request
        .post("saveWordLogicTest", {
          question: JSON.stringify(arr),
          test_id: this.allquestion[0].test_id,
        })
        .then((res) => {
          console.log(res.data.code);
          if (res.data.code == 200) {
            this.clearVuex();
            this.$emit("Jump", "/score", {
              test_id: this.allquestion[0].test_id,
              test_type: "wordlogic",
            });
          }
        });
    },

    //结束之后清除
    clearVuex() {
      this.$store.commit("setSummarize", 0);
      this.$store.commit("setsummarizequestionArray", null);
    },
    changeItemel(array, v) {
      //点一次存一次

      for (var i = 0; i < array.length; i++) {
        array[i].isChose = false;
      }
      v.isChose = true;

      this.saveQuestion();
    },
    choseitem(array, v) {
      //点一次存一次
      for (var i = 0; i < array.length; i++) {
        array[i].isChose = false;
      }
      v.isChose = true;

      this.saveQuestion();
    },
    gome() {},
    // 前往首页
    goHome() {},
  },
};
</script>
<style lang="less" scoped>
.big_box {
  padding: 1.17rem 0.6rem 0.38rem 1.01rem;
  box-sizing: border-box;
  height: 100%;
  width: 100%;
}
.topic_con_scroll {
  overflow-y: scroll;
  height: 100%;
  //火狐浏览器隐藏滚动条
  & {
    scrollbar-color: #9eb0e6 #f7f7f9;
    scrollbar-width: thin;
    scrollbar-track-color: transparent;
    -ms-scrollbar-track-color: transparent;
  }
  /* 设置滚动条的样式 谷歌  */
  &::-webkit-scrollbar {
    width: 12px;
  }
  /* 滚动槽 */
  &::-webkit-scrollbar-track {
    -webkit-box-shadow: inset006pxrgba(223, 224, 229);
    border-radius: 10px;
  }
  /* 滚动条滑块 */
  &::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(158, 176, 230);
    -webkit-box-shadow: inset006pxrgba(158, 176, 230);
  }
  &::-webkit-scrollbar-thumb:window-inactive {
    background: rgba(229, 226, 217);
  }
  .topic_item {
    font-size: 0.21rem;
    .topic_item_t {
      display: flex;
      & > span {
        color: #2175f4;
      }
      & > img {
        margin: 0 0.4rem;
        width: 0.75rem;
        height: 0.75rem;
      }
      & > p {
      }
    }

    .topic_item_p {
      display: flex;
      flex-wrap: wrap;
      margin: 0.3rem 0;
      padding-left: 0.59rem;
      .item_p_sel {
        position: relative;
        margin: 0.13rem 0.4rem;
        // padding: 0 .3rem 0 .6rem;
        padding: 0 0.86rem 0 0.98rem;
        height: 0.85rem;
        line-height: 0.85rem;
        text-align: center;
        color: #333;
        font-size: 0.18rem;
        border: 1px solid #c8c7c4;
        border-radius: 45px;
        cursor: pointer;
        .target {
          position: absolute;
          top: 50%;
          left: 0.31rem;
          transform: translateY(-60%);
          width: 0.35rem;
          height: 0.38rem;
        }
      }
      .curr_item_p_sel {
        background: #e8edf3;
      }
    }
  }
  .next_group {
    float: right;
    width: 1.68rem;
    height: 0.66rem;
    cursor: pointer;
    & > img {
      width: 100%;
      height: 100%;
    }
  }
}
.topic_item_chose {
  margin-top: 0.07rem;
  padding-left: 1.8rem;
  // overflow: hidden;
  height: 0.68rem;
  .topic_item_chose_item_father {
    height: 0.52rem;
    // padding:0.08rem 0.1rem ;
    width: 0.92rem;
    border-radius: 0.36rem;
    background: #fffbf0;
    float: left;
    margin-right: 0.32rem;
    position: relative;
  }
  .topic_item_chose_item {
    width: 100%;
    height: 100%;
    // padding: 0 0.24rem;
    line-height: 0.48rem;
    font-size: 0.21rem;
    box-sizing: border-box;
    text-align: center;
    // float: left;
    color: #333333;
    border: 0.04rem solid #f3f2ef;
    border-radius: 0.26rem;
    cursor: pointer;
    margin-right: 0.14rem;
    position: relative;

    & > .ch_box {
      width: 0.34rem;
      height: 0.34rem;
      position: absolute;
      right: 0;
      bottom: -0.06rem;
      background-size: 100%;
      background-repeat: no-repeat;
    }

    & > .hand_gif {
      width: 1rem;
      height: 1rem;
      position: absolute;
      bottom: -0.5rem;
      right: -0.5rem;
      z-index: 35;
      & > img {
        width: 100%;
        height: 100%;
      }
    }
  }
  .topic_item_chose_item:hover {
    background: #d2dff6;
    color: #395dd2;
    border: 0.04rem solid #d2dff6;
  }
  .topic_item_is_chose {
    background: #5b7ce8;
    color: #ffffff;
    border: 0.04rem solid #5b7ce8;
  }
}
.topic_item_tips {
  font-size: 0.21rem;
  color: #373737;
  padding-left: 1.85rem;
  margin: 0.34rem 0 0.28rem;
  position: relative;
  & > span {
    position: relative;
    & > div {
      height: 0.05rem;
      position: absolute;
      background-color: #5b7ce8;
      border-radius: 0.3rem;
      left: 0%;
      bottom: -10%;
    }
  }
}
.question_content {
  font-size: 0.21rem;
  padding-top: 0.31rem;
  padding-right: 0.91rem;
  margin-bottom: 0.28rem;
  color: #373737;
  .question_tit {
    color: #2175f4;
    margin-bottom: 0.3rem;
  }
  .question_box {
    padding-left: 0.4rem;
    .question_box_tit {
      font-weight: bold;
      text-align: center;
      margin-bottom: 0.4rem;
    }
  }
}
</style>
